<template>
  <div class="main">
    <!-- 登录部分 -->
    <div class="login_content">
      <!-- 左边部分 -->
      <div class="l_content">
        <!-- logo等 -->
        <div class="box_1">
          <img src="@/static/img/login/logo.png" alt="" />
          <div>欢迎！</div>
          <div>智学商城 后台管理系统</div>
        </div>
      </div>
      <!-- 登录表单 -->
      <div class="r_content">
        <div class="subimt">
          <div>登录</div>
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
          >
            <div>
              <!-- 用户名输入框 -->
              <el-form-item prop="username">
                <el-input
                  size="large"
                  v-model.trim="ruleForm.username"
                  @keyup.enter="submitForm('ruleFormRef')"
                  placeholder="用户名"
                  autocomplete="off"
                >
                  <template #prefix>
                    <el-icon>
                      <User />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div>
              <!-- 密码输入框 -->
              <el-form-item prop="password">
                <el-input
                  size="large"
                  @keyup.enter="submitForm('ruleFormRef')"
                  v-model.trim="ruleForm.password"
                  placeholder="密码"
                  autocomplete="off"
                  show-password
                >
                  <template #prefix>
                    <el-icon>
                      <Lock />
                    </el-icon>
                  </template>
                </el-input>
              </el-form-item>
            </div>
            <div style="display: flex; justify-content: center">
              <el-form-item>
                <el-button
                  size="large"
                  type="primary"
                  style="width: 150px"
                  @click="debounce(submitForm, 'ruleFormRef')"
                  >登录</el-button
                >
              </el-form-item>
            </div>
          </el-form>
          <div style="font-size: 15px; margin: 0px">作者：雷晴</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Lock, User } from "@element-plus/icons-vue";
import Cookie from "js-cookie";
import { post } from "@/utils/http";
import { mapActions } from "vuex";
import { setStore } from "@/store"; //储存vuex初始值的方法

export default {
  components: {
    Lock,
    User,
  },
  data() {
    //密码验证
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    //用户名验证
    let validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    return {
      // 表单提交数据
      ruleForm: {
        password: "1234567",
        username: "admin",
      },
      //触发验证的条件
      rules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        username: [{ validator: validateUser, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapActions(["getUseIfo"]),
    submitForm(formEl) {
      this.$refs[formEl].validate((valid) => {
        // 表单验证成功
        if (valid) {
          //发送请求
          post({ ...this.ruleForm, _mt: "login", _gp: "admin" }).then((res) => {
            //请求成功时
            // 状态码为200时
            if (200 == res?.errno) {
              // 通过数据中的时间戳，获取添加30分钟的时间
              let expiresTime = new Date(res.timestamp + 60 * 1000 * 30);
              //添加token，设置过期时间
              Cookie.set("token", res.data, { expires: expiresTime });
              // 判断是否为token过期的跳转
              let path = this.$route.query.back;
              if (path) {
                this.$router.replace(path);
              } else {
                //跳转到首页(关闭当前页面)
                this.$router.replace("/index/homepage");
              }
              // 储存vuex初始值
              setStore();
              // 发送请求获取用户信息并存储到vuex
              post({
                _mt: "info",
                _gp: "admin",
              })
                .then((res) => {
                  this.$store.dispatch("setUser", res.data);
                })
                .catch((err) => {
                  console.log(err);
                });
              // 把用户登录的表单信息添加到vuex
              this.getUseIfo(this.ruleForm);
              //登录成功提示
              ElMessage.success("登录成功");
            }
          });
        } else {
          // 表单验证不通过的提示
          ElMessage.error("请把必要信息填写完整");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
//保持在父盒中的css
.keep_center {
  display: flex;
  align-items: center;
  justify-content: center;
}
//页面主体
.main {
  background: url("@/static/img/login/login-back.png") no-repeat 100% / cover;
  width: 100%;
  height: 100vh;
  text-align: center;
  .login_content {
    width: 750px;
    height: 400px;
    display: flex;
    // 左边部分

    .l_content {
      width: 40%;
      background: #005de9;
      color: #fff;
      .box_1 {
        flex-direction: column;
        div {
          margin: 6px 0px;
        }
        img {
          width: 80px;
          margin: 8px 0px;
          box-shadow: #fff 3px -3px 15px 1px;
          background: #0459f2;
          border-radius: 50%;
        }
        .keep_center();
      }
      .keep_center();
    }
    // 右边表单
    .r_content {
      font-size: 18px;
      width: 60%;
      background: white;
      .subimt {
        width: 330px;
      }
      .subimt > div {
        margin: 15px 0px;
      }

      .keep_center();
    }
  }
  .keep_center();
}
</style>
